<template>
    <div style="width: 80%;margin-left:500px">
        <el-form ref="service" :model="service" label-width="100px">
            <el-form-item label="服务名称">
                <el-input v-model="service.serviceName" style="width:300px">请输入服务名称</el-input>
            </el-form-item>
            <el-form-item label="使用规格">
                <el-input v-model="service.serviceWeight" style="width:300px">请输入使用规格</el-input>
            </el-form-item>
            <el-form-item label="耗时">
                <el-input v-model="service.serviceUsetime" style="width:300px">耗时</el-input>
            </el-form-item>
            <!-- <div class="block">
                <el-form-item label="可预约时间">
                    <el-date-picker
                    v-model="service.serviceTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </div> -->
            <el-form-item label="可预约时间">
                <el-input v-model="service.serviceTime" style="width:300px">可预约时间</el-input>
            </el-form-item>

            <el-form-item label="服务类别">
                <el-input v-model="service.serviceFix" style="width:300px">请输入服务类别</el-input>
            </el-form-item>
            <el-form-item label="服务员等级">
                <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="staff in staffs"
                :key="staff.staff.staffId.value"
                :label="staff.staff.staffLevel"
                :value="staff.staff.staffId">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="service.servicePrice" style="width:300px">价格</el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item> 
        </el-form>
    </div>
  
</template>

<script>

import {addService,getStaffs,updateService} from '@/services/ServiceService.js'

export default {
    data(){
        return{            
            staffs:[],
            value:'',
            service:{
                serviceId:"",
                serviceName:"",
                serviceWeight:"",
                serviceUsetime:"",
                serviceTime:"",
                staffId:"",
                serviceFix:"",
                servicePrice:"",               
            },
        }
    },
    async created(){
      console.log("staffs")
      this.staffs = await getStaffs();  
      console.log(this.staffs)
      this.service = this.$route.params;
    },
    methods:{
        async onSubmit(){
            console.log("----------------------")
            this.service.serviceId = this.service.serviceId
            console.log(this.service.serviceId)
            this.service.staffId = this.value
            var resp = await updateService(this.service);
            
            console.log(resp)
            if(resp.data){
                this.$router.push({name:"Service"});
            }
            else{
                console.log("修改失败........");
            }
        },
        async cancel(){
            
            this.$router.push({name:"Service"});
  
        }
    }
}
</script>

<style>

</style>